<template>
    <el-form v-if="stateDetail.orderNumber" :model="stateDetail" status-icon :rules="rules" ref="stateDetail" label-width="100px" class="order-ruleForm">
        <h2>订单详情</h2>
        <el-form-item label="订单号：" prop="orderNumber">{{ stateDetail.orderNumber }}</el-form-item>
        <el-form-item v-if="stateDetail.cmItem" label="服务项目:" prop="orderno">{{ stateDetail.cmItem.name }}</el-form-item>
        <el-form-item label="订单日期：" prop="orderCreateTime">{{ stateDetail.orderCreateTime }}</el-form-item>
        <el-form-item label="联系人：" prop="userName">{{ stateDetail.userName }}</el-form-item>
        <el-form-item label="联系电话：" prop="userMobile">{{ stateDetail.userMobile }}</el-form-item>
        <el-form-item label="联系地址：" prop="userAddress">{{ stateDetail.userAddress }}</el-form-item>
        <el-form-item label="地址状态：" prop="addressStatus">{{ stateDetail.addressStatus == 9 ? '管家地址': '普通地址' }}</el-form-item>
        <el-form-item label="订单类型：" prop="orderType">{{ stateDetail.orderType == 0 ? '免费保洁':(stateDetail.orderType == 1) ? '维修': '保洁' }}</el-form-item>
        <el-form-item label="订单状态：" prop="orderStatus">
            <el-select v-model="orderStatus" placeholder="请选择状态">
                <el-option label="正在派单" :value="1"></el-option>
                <el-option label="已派单" :value="2"></el-option>
                <el-option label="正在服务" :value="3"></el-option>
                <el-option label="服务完成" :value="4"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="服务人员：" prop="orderyytime">            
            <el-button plain @click="dialogTableVisible = true">{{ stateDetail.cmSp ? stateDetail.cmSp.spName : (spName != '' ? spName:'请选择服务人员')}}</el-button>
            <span style="padding-left:15px;color:#409EFF;">{{ spName }}</span>
        </el-form-item>

        <!-- 选择服务人员弹窗 -->
        <el-dialog title="选择服务人员" :visible.sync="dialogTableVisible" width="80%" :center="true" >
            <el-table :data="serviceData.slice((currentPage-1)*pagesize,currentPage*pagesize)" size="mini">
                <el-table-column property="cmType" label="人员类别" width="100"
                :filters="[{ text: '保洁', value: '保洁' }, { text: '维修', value: '维修' }]"
                :filter-method="filterTag"
                filter-placement="bottom-end">
                <template slot-scope="scope">
                    {{ scope.row.cmType == 1 ? '维修' : '保洁'}}
                </template>
                </el-table-column>
                <el-table-column property="spName" label="姓名"></el-table-column>
                <el-table-column property="spIconUrl" label="头像" width="100">
                    <template slot-scope="scope">
                        <img :src="scope.row.spIconUrl" width="30" height="30" />
                    </template>
                </el-table-column>
                <el-table-column property="sex" label="性别"></el-table-column>
                <el-table-column property="age" label="年龄"></el-table-column>
                <el-table-column property="spMobile" label="联系方式" width="150"></el-table-column>
                <el-table-column property="satisfaction" label="星级评价" width="200">
                    <template slot-scope="scope">
                        <el-rate
                        v-model="scope.row.satisfaction"
                        disabled
                        show-score
                        text-color="#FCCB4E"
                        score-template="{value}">
                        </el-rate>
                    </template>                    
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="primary"
                        @click="handleSelect(scope.$index, scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                class="dialog-footer"
                slot="footer"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="pagesize"
                layout="total, prev, pager, next"
                :total="this.serviceData.length">
            </el-pagination>
        </el-dialog>

        <el-form-item label="预约时间：" prop="scheduledTime">{{ stateDetail.scheduledTime }}</el-form-item>
        <el-form-item label="预计到达：" prop="arrivettime">
            <el-date-picker
                v-model="selectArriveTime"
                type="datetime"
                placeholder="选择到达时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="12:00:00">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('stateDetail')">提交</el-button>
            <el-button @click="backForm()">返回</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import {mapState, mapMutations, mapActions} from 'vuex'
export default {
    created(){
        let orderNumber = this.$route.query.orderNumber;
        this.updateState({orderNumber:orderNumber}).then( () => {
            let ordeType = this.stateDetail.ordeType;
            let cmType = ordeType === 1 ? 1: 2;
            this.getServiceData({cmType:cmType});
        })
    },
    data() {
        return {
            spName:'',
            pagesize:7,
            currentPage: 1,
            rules:{
                orderstatus:[{ required: true, message: '请选择状态', trigger: 'blur' }],
            },
            dialogTableVisible: false,
        };
    },
    computed:{
        ...mapState({
            stateDetail:state => state.stateModule.stateDetail,
            serviceData:state => state.stateModule.serviceData,
        }),
        spId:{
            get(){
                return this.stateDetail.cmSp ? this.stateDetail.cmSp.spId : this.stateDetail.spId;
            },
            set(value){
                return this.updateSpId(value);
            }
        },
        selectArriveTime:{
            get(){
                return this.stateDetail.arriveTime
            },
            set(value){
                this.updateArriveTime(value)
            }
        },
        orderStatus:{
            get(){
                return this.stateDetail.orderStatus;
            },
            set(value){
                this.updateOrderStateStatus(value);
            }
        }
    },
    methods: {
        ...mapActions({
            getServiceData:'stateModule/getServiceData',
            updateState:'stateModule/updateState',
            updateOrderState:'stateModule/updateOrderState',
        }),
        ...mapMutations({
            updateOrderStateStatus:'stateModule/updateOrderStateStatus',
            updateArriveTime:'stateModule/updateArriveTime',
            updateSpId:'stateModule/updateSpId'
        }),
        //分页
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
        },
        
        filterTag(value, row) {
            // return row.cmType === value;
            if(row.cmType == 1){
                return '维修' === value
            }else{
                return '保洁' === value
            }
        },
        submitForm() {
            let params = {
                orderNumber: this.stateDetail.orderNumber,
                spId:this.spId,
                orderStatus: this.orderStatus,
                arriveTime:this.selectArriveTime
            }
            if(!params.orderNumber){ this.$alert('订单错误');return;}
            if(!params.spId){ this.$alert('订单错误,请选择服务人员.');return;}
            if(!params.orderStatus){ this.$alert('订单错误');return;}
            if(!params.arriveTime){ this.$alert('请选择预计到达时间');return;}
            this.updateOrderState(params).then((res)=>{
                if(res.status == 1){
                    this.$alert('修改成功').then(()=>{
                        this.$router.push('/state');//成功跳转
                        this.$store.dispatch('stateModule/getStateInfo');//更新状态
                    })
                }else{
                    this.$alert('订单错误，请返回重新操作！');
                }
            })

        },
        backForm() {
            this.$router.push({path:'/state'});
            this.$store.dispatch('stateModule/getStateInfo');
        },
        handleSelect(index, row){
            this.spId = row.spId;
            this.spName = row.spName,
            this.dialogTableVisible = false            
        },
    }
}
</script>

<style lang="scss" scoped>
.order-ruleForm .el-form-item{
    margin-bottom: 12px !important;
    text-align: left;
}

</style>



